Manual Color Palettes তৈরি করা

Data Visualization এর জন্য Color Schemes - জিজি প্লট (ggplot2) - Big Data and Analytics

372

গুগল চার্টে Manual Color Palettes তৈরি করা অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ডেটার ভিজুয়ালাইজেশনকে আরও সুন্দর, স্বচ্ছ এবং কাস্টমাইজেবল করে তোলে। কখনও কখনও আপনি বিশেষ রঙ ব্যবহার করতে চান যা আপনার ডেটার শ্রেণী বা কন্টেক্সটের জন্য সঠিক এবং সামঞ্জস্যপূর্ণ। গুগল চার্টে আপনি manual color palettes ব্যবহার করে আপনার চাহিদা অনুযায়ী রঙ নির্ধারণ করতে পারেন।

গুগল চার্টে manual color palettes ব্যবহার করার জন্য colors অপশন ব্যবহার করা হয়, যেখানে আপনি রঙের একটি নির্দিষ্ট তালিকা প্রদান করতে পারেন।


Manual Color Palettes তৈরি করার পদ্ধতি

গুগল চার্টে manual color palettes তৈরি করতে, colors অপশন ব্যবহার করে আপনার কাঙ্ক্ষিত রঙগুলি প্রদান করতে হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে বিভিন্ন ডেটা সিরিজের জন্য ম্যানুয়াল রঙ ব্যবহার করা হয়েছে।

উদাহরণ: গুগল চার্টে Manual Color Palettes তৈরি করা

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        packages: ['corechart', 'bar']
      });

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Category', '2019', '2020', '2021'],
          ['A', 1000, 1170, 660],
          ['B', 1170, 660, 1120],
          ['C', 660, 1120, 1200],
          ['D', 1030, 540, 800]
        ]);

        var options = {
          title: 'Company Performance',
          chartArea: {
            width: '50%'
          },
          hAxis: {
            title: 'Total Revenue',
            minValue: 0
          },
          vAxis: {
            title: 'Year'
          },
          // Manual color palette for the series
          colors: ['#FF5733', '#33FF57', '#3357FF']  // প্রতিটি সিরিজের জন্য রঙ নির্ধারণ
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ব্যাখ্যা:

  • colors: ['#FF5733', '#33FF57', '#3357FF']: এখানে তিনটি ভিন্ন রঙের কোড নির্ধারণ করা হয়েছে যা 2019, 2020, এবং 2021 এর জন্য যথাক্রমে দেওয়া হয়েছে।
    • #FF5733: লাল রঙ
    • #33FF57: সবুজ রঙ
    • #3357FF: নীল রঙ

এই রঙগুলি স্বয়ংক্রিয়ভাবে প্রতিটি ডেটা সিরিজের জন্য প্রয়োগ হবে।


আরও কাস্টমাইজেশন

গুগল চার্টে manual color palette আরও কাস্টমাইজ করা যেতে পারে। আপনি যদি একাধিক রঙের স্কিম তৈরি করতে চান, অথবা বিশেষ কিছু শ্রেণী বা ডেটা পয়েন্টের জন্য আলাদা রঙ ব্যবহার করতে চান, তবে এটি সহজেই করা সম্ভব। এখানে একটি উন্নত উদাহরণ দেওয়া হলো, যেখানে প্রতিটি শ্রেণীর জন্য আলাদা রঙ প্রয়োগ করা হয়েছে।

উদাহরণ: Manual Color Palettes with Conditional Colors

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        packages: ['corechart', 'bar']
      });

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Category', '2019', '2020', '2021'],
          ['A', 1000, 1170, 660],
          ['B', 1170, 660, 1120],
          ['C', 660, 1120, 1200],
          ['D', 1030, 540, 800]
        ]);

        var options = {
          title: 'Company Performance',
          chartArea: {
            width: '50%'
          },
          hAxis: {
            title: 'Total Revenue',
            minValue: 0
          },
          vAxis: {
            title: 'Year'
          },
          // Advanced Manual Color Palette based on categories
          colors: ['#FF5733', '#FFBD33', '#33FF57', '#3357FF']  // Colors for each category (A, B, C, D)
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ব্যাখ্যা:

  • এখানে categories A, B, C, D এর জন্য আলাদা রঙ ব্যবহার করা হয়েছে। আপনি colors প্রপার্টিতে প্রতিটি ক্যাটাগরির জন্য একটি নির্দিষ্ট রঙ নির্বাচন করেছেন।

গুগল চার্টে অন্যান্য Color Customizations

গুগল চার্টে বিভিন্ন প্যাকেজের জন্য আরও অনেক কাস্টমাইজেশন ফিচার রয়েছে, যা আপনাকে গ্রাফের রঙ, স্টাইল এবং ডিজাইন পরিবর্তন করতে সহায়ক। এখানে কিছু অতিরিক্ত কাস্টমাইজেশন অপশন দেওয়া হলো:

  • colorAxis: আপনি যদি মানের উপর ভিত্তি করে রঙের গ্রেডিয়েন্ট তৈরি করতে চান, তাহলে colorAxis ব্যবহার করতে পারেন।
colorAxis: { minValue: 0, maxValue: 1500, colors: ['#e0e0e0', '#76c7c0'] }
  • backgroundColor: গ্রাফের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করতে পারেন।
backgroundColor: '#f4f4f4'
  • is3D: 3D চেহারা দিতে পারেন।
is3D: true

সারমর্ম

গুগল চার্টে manual color palettes ব্যবহার করে আপনি সহজেই আপনার ডেটার জন্য কাস্টম রঙ নির্বাচন করতে পারেন। এটি আপনার ভিজুয়ালাইজেশনকে আরও সুন্দর এবং বোঝার উপযোগী করে তোলে। colors প্রপার্টি ব্যবহার করে বিভিন্ন সিরিজ বা শ্রেণীর জন্য রঙ কাস্টমাইজ করা যায় এবং গুগল চার্টে বিভিন্ন ধরনের রঙের কাস্টমাইজেশন অপশন রয়েছে যা আপনাকে আরও বিস্তারিত ভিজুয়ালাইজেশন তৈরি করতে সাহায্য করবে।

Content added By
Promotion

Are you sure to start over?

Loading...